// app global css in SCSS form
/* Fonts */
@font-face {
    font-family: noto-serif;
    src: url(../assets/fontStyles/noto_serif_sc_woff/NotoSerifSC-Regular.woff);
}

@font-face{
    font-family: kaiu;
    src: url('src/assets/fontStyles/from_client/kaiu.ttf');
}

@font-face{
    font-family: arial;
    src: url('src/assets/fontStyles/from_client/arial.ttf');
}

@font-face{
    font-family: msjh;
    src: url('src/assets/fontStyles/from_client/msjh.ttc');
}

@font-face{
    font-family: simsun;
    src: url('src/assets/fontStyles/from_client/simsun.ttc');
}

@font-face{
    font-family: CommercialScript_BT;
    src: url('src/assets/fontStyles/from_client/CommercialScript_BT.ttf');
}
  
@font-face{
    font-family: Euphemia;
    src: url('src/assets/fontStyles/from_client/euphemia.ttf');
}

@font-face{
    font-family: msgothic;
    src: url('src/assets/fontStyles/from_client/msgothic.ttc');
}

@font-face{
    font-family: Vineta_BT;
    src: url('src/assets/fontStyles/from_client/Vineta_BT_.ttf');
}

@font-face{
    font-family: segoeui;
    src: url('src/assets/fontStyles/from_client/segoeui.ttf');
}


.font-noto-serif{
    font-family: noto-serif;
}

html{
    font-size: 100%;
}

@media (max-width:480px){
    body{
        font-size: 1.3rem;
    }
}
@media (min-width:481px){
    body{
        font-size: 1.5rem;
    }
}

body{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(#6456C8, #9EABEA, #CAD9FF);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;  
    background-color: #6456C8;  /* For browsers that cannot support */
    margin-bottom: 30px;
}

/* Header */
.headerCom{
    color: white;
    margin: 5px 10px 10px 10px;
    padding-top: 5px;
}

.iconBack, .iconMenu{
    font-size: 2.3rem;
    margin-top: 10px;
    color: white;
}

.titleHr{
    border: 0.3rem solid white;  
    opacity: 1; 
    margin-top: 0;
    margin-bottom: 0;
}

.titleText{
    @media (min-width:481px){
        font-size: 1.5em;
    }
}

.infoBox{
    // font-size: 8px;
    font-size: 0.7rem;
    @media (max-width:480px){
        font-size: 0.4rem;
    }
}

/* Footer */
.footer{
    background-color: #685BCA;
    color: white;
    // text-align: right;
    font-size: 0.8rem;
    padding-right: 10px;

    position: fixed;
    // left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}  

#sys_ver {
    padding-left: 10px;
    text-align: left;
}
  
#time {
    text-align: right;
}

#date {
    padding-right: 5px;
    margin-left: auto;
}

/* Customized Components */


/* Colors */
.color-white{
    background-color: white;
}

.color-black{
    background-color: black;
}

.color-lightred{
    background-color: #FD7474;
    color: white;
}

.color-red{
    background-color: #EB0000;
    color: white;
}

.color-yellow{
    background-color: #FFC700;
    color: white;
}

.color-green{
    background-color: #24C734;
    color: white;
}

.color-lightpurple{
    background-color: #C0BAFF;
    color: white;
}

.color-purple{
    background-color: #6456C8;
    color: white;
}

.color-darkpurple{
    background-color: #4B4396;
    color: black;
}

.color-sdarkpurple{
    background-color: #332C63;
    color: black;
}

.color-violet{
    background-color: #6456C8;
    color: white;
}

.color-darkviolet{
    background-color: #4B4396;
    color: white;
}

.color-lightbluegrey{
    background-color: #ACBADF;
    color: black;
}

.color-bluegrey{
    background-color: #97A3C2;
    color: black;
}

.color-darkbluegrey{
    background-color: #747D95;
    color: black;
}

.color-successgreen{
    background-color: #24C734;
    color: white;
}

.color-failred{
    background-color: #FF7878;
    color: white;
}

.color-startgreen{
    background-color: #49BB55;
    color: white;
}

.color-paused{
    background-color: #FB4A4A;
    color: white;
}

.color-donepurple{
    background-color: #4436D0;
    color: white;
}

.color-progressyellow{
    background-color: #FFE588;
    color: black;
}

.color-disabledgrey{
    background-color: #C0C0C0;
    color: white;
}

.color-cancel{
    background-color: #A09E9E;
    color: white   
}




/* buttons */
.btn-br5{
    border-radius: 5px;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-br10{
    border-radius: 10px;
    border-width: 0px;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.btn-br20{
    border-radius: 20px;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition-duration: 0.3s;
}

.btn-br5-purple{
    background-color: #6456C8;
    border-radius: 20px;
    color: white;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition-duration: 0.3s;
}

.btn-br10-purple{
    background-color: #6456C8;
    border-radius: 10px;
    border-width: 0px;
    color: white;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition-duration: 0.3s;
}

.btn-br10-purple:hover{
    background-color: #5449aa;
    border-radius: 10px;
    color: white;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-br20-purple{
    background-color: #6456C8;
    border-radius: 20px;
    color: white;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition-duration: 0.3s;
}

.input-br20-white{
    background-color: white;
    border-radius: 20px;
    border-width: 0px;
    padding: 5px 0px 5px 10px;
    margin: 10px 0px 5px 0px;
    width: 90%;
}

.input-br0-white{
    background-color: white;
    border-width: 0px;
    padding: 5px 0px 5px 10px;
}

/* font-weight */

.f-bold{
    font-weight: bold;
}

.f-bolder{
    font-weight: bolder;
}

/* font-size */
.f-small{
    font-size: 0.5rem;
}

.f-slarge{
    font-size: 1.2rem;
}

.f-large{
    font-size: 1.5rem;
}

.f-xlarge{
    font-size: 2rem;
}

.f-xxlarge{
    font-size: 2.5rem;
}

/* font-color */
.f-white{
    color: white;
}

.f-black{
    color: black;
}

/* text-align */
.text-center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}